<template>
    <div class="summerPractice">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 暑期练琴</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 列表 -->
        <div class="container">
            <div @change="swtichSummerPracticeOption">
                <el-radio v-model="matterType" label="1" border>活动信息</el-radio>
                <el-radio v-model="matterType" label="2" border>乐曲资源</el-radio>
                <el-radio v-model="matterType" label="3" border>数据导出</el-radio>
                <el-radio v-model="matterType" label="4" border>颁发奖项</el-radio>
            </div>
            <!-- 活动信息 -->
            <div v-show="matterType === '1'">
                <div class="matterTitle">活动信息</div>
                <el-form label-width="50px">
                    <el-form-item>
                        <div class="matterColumn">
                        <!-- <el-row el-row :gutter="20">
                            <el-col :span="8"> -->
                                <div class="matterCard">
                                    <el-card :body-style="{ padding: '0px' }">
                                        <div style="padding-top: 20px">
                                            <el-form label-width="180px">
                                                <el-form-item label="活动开始时间">
                                                    <el-date-picker v-model="matterStartTime" type="datetime" placeholder="选择活动开始时间" :disabled="editMatterStatus === '1'"></el-date-picker>
                                                </el-form-item>
                                                <el-form-item label="活动结束时间">
                                                    <el-date-picker v-model="matterEndTime" type="datetime" placeholder="选择活动结束时间" :disabled="editMatterStatus === '1'"></el-date-picker>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                        <div style="padding: 14px;">
                                            <span style="font-size: 20px;color: #3498db;">活动时间</span>
                                            <div class="matterUpload">
                                                <el-button round @click.stop.prevent="optionEditorMatterTime(editMatterStatus)">{{editMatterStatus === '1'? '编辑时间': '保存编辑'}}</el-button>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            <!-- </el-col>
                            <el-col :span="8"> -->
                                <div class="matterCard">
                                    <el-card :body-style="{ padding: '0px' }">
                                        <div style="padding-top: 20px">
                                            <el-form label-width="180px">
                                                <el-form-item label="第一阶段颁奖时间">
                                                    <el-date-picker v-model="awardTimeOne" type="datetime" placeholder="选择颁奖时间" :disabled="editAwardStatus === '1'"></el-date-picker>
                                                </el-form-item>
                                                <el-form-item label="第二阶段颁奖时间">
                                                    <el-date-picker v-model="awardTimeTwo" type="datetime" placeholder="选择颁奖时间" :disabled="editAwardStatus === '1'"></el-date-picker>
                                                </el-form-item>
                                                <el-form-item label="第三阶段颁奖时间">
                                                    <el-date-picker v-model="awardTimeThree" type="datetime" placeholder="选择颁奖时间" :disabled="editAwardStatus === '1'"></el-date-picker>
                                                </el-form-item>
                                                <el-form-item label="第四阶段颁奖时间">
                                                    <el-date-picker v-model="awardTimeFour" type="datetime" placeholder="选择颁奖时间" :disabled="editAwardStatus === '1'"></el-date-picker>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                        <div style="padding: 14px;">
                                            <span style="font-size: 20px;color: #3498db;">颁奖时间</span>
                                            <div class="matterUpload">
                                                <el-button round @click.stop.prevent="optionEditorAwardTime(editAwardStatus)">{{editAwardStatus === '1'? '编辑时间': '保存编辑'}}</el-button>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            <!-- </el-col>
                        </el-row> -->
                        <!-- <el-row :gutter="20">
                            <el-col :span="8"> -->
                                <div class="matterCard">
                                    <el-card :body-style="{ padding: '0px' }">
                                        <img :src="matterCover" class="image">
                                        <div style="padding: 14px;">
                                            <span style="font-size: 20px;color: #3498db;">首页海报</span>
                                            <div class="matterUpload">
                                                <el-button round>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                                                <div class="uploadCell">
                                                    <input class="uploadInput" type="file" name="image" ref="matterCover" accept="image/*" @change="optionUploadMultimediaFile($event, '1')"/>
                                                </div>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            <!-- </el-col>
                            <el-col :span="8"> -->
                                <div class="matterCard">
                                    <el-card :body-style="{ padding: '0px' }">
                                        <img :src="matterReferral" class="image">
                                        <div style="padding: 14px;">
                                            <span style="font-size: 20px;color: #3498db;">活动介绍页</span>
                                            <div class="matterUpload">
                                                <el-button round>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                                                <div class="uploadCell">
                                                    <input class="uploadInput" type="file" name="image" ref="matterReferral" accept="image/*" @change="optionUploadMultimediaFile($event, '2')"/>
                                                </div>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            <!-- </el-col>
                            <el-col :span="8"> -->
                                <div class="matterCard">
                                    <el-card :body-style="{ padding: '0px' }">
                                        <img :src="matterRule" class="image">
                                        <div style="padding: 14px;">
                                            <span style="font-size: 20px;color: #3498db;">活动规则页</span>
                                            <div class="matterUpload">
                                                <el-button round>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                                                <div class="uploadCell">
                                                    <input class="uploadInput" type="file" name="image" ref="matterRule" accept="image/*" @change="optionUploadMultimediaFile($event, '3')"/>
                                                </div>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            <!-- </el-col>
                            <el-col :span="8"> -->
                                <div class="matterCard">
                                    <el-card :body-style="{ padding: '0px' }">
                                        <img :src="matterGain" class="image">
                                        <div style="padding: 14px;">
                                            <span style="font-size: 20px;color: #3498db;">音符获取页</span>
                                            <div class="matterUpload">
                                                <el-button round>上传图片<i class="el-icon-upload el-icon--right"></i></el-button>
                                                <div class="uploadCell">
                                                    <input class="uploadInput" type="file" name="image" ref="matterGain" accept="image/*" @change="optionUploadMultimediaFile($event, '4')"/>
                                                </div>
                                            </div>
                                        </div>
                                    </el-card>
                                </div>
                            <!-- </el-col>
                        </el-row> -->
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 乐曲资源 -->
            <div v-show="matterType === '2'">
                <div class="matterTitle">乐曲资源</div>
                <el-table :data="musicResourceList" style="width: 100%">
                    <el-table-column align="center" width="150" label=""></el-table-column>
                    <el-table-column label="">
                        <template slot-scope="scope">
                            {{scope.row.serialNumber}}
                        </template>
                    </el-table-column>
                    <el-table-column label="">
                        <template slot-scope="scope">
                            {{scope.row.title || '未上传'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="">
                        <template slot-scope="scope">
                            {{scope.row.issueTime || '未发布'}}
                        </template>
                    </el-table-column>
                    <el-table-column label="" align="center" width="300">
                        <template slot-scope="scope">
                            <el-button type="warning" plain @click.stop.prevent="operateSelectResource(scope.row)">选择资源</el-button>
                            <!-- <el-button type="primary" plain>发布时间</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="matterTitle">数据概览</div>
                <!-- {{scope.row.personnelNumber}} -->
                <el-table :data="participateDatumList" style="width: 100%">
                    <el-table-column align="center" width="20" label=""></el-table-column>
                    <el-table-column label="活动参与人数" align="center">
                        <template slot-scope="scope">
                            {{scope.row.personnelNumber}}
                        </template>
                    </el-table-column>
                    <el-table-column label="第一阶段全部三星人数" align="center">
                        <template slot-scope="scope">
                            {{scope.row.stageOneStar}}
                        </template>
                    </el-table-column>
                    <el-table-column label="第二阶段全部三星人数" align="center">
                        <template slot-scope="scope">
                            {{scope.row.stageTwoStar}}
                        </template>
                    </el-table-column>
                    <el-table-column label="第三阶段全部三星人数" align="center">
                        <template slot-scope="scope">
                            {{scope.row.stageThreeStar}}
                        </template>
                    </el-table-column>
                    <el-table-column label="第四阶段全部三星人数" align="center">
                        <template slot-scope="scope">
                            {{scope.row.stageFourStar}}
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-card style="margin: 10px auto; width: 80%;">
                    <div class="matterStatistics">活动参与人数：999,999,999</div>
                    <div class="matterStatistics">第一阶段全部三星人数：999,999,999</div>
                    <div class="matterStatistics">第二阶段全部三星人数：999,999,999</div>
                    <div class="matterStatistics">第三阶段全部三星人数：999,999,999</div>
                    <div class="matterStatistics">第四阶段全部三星人数：------------------</div>
                </el-card> -->
            </div>
            <!-- 数据导出 -->
            <div v-show="matterType === '3'">
                <div class="matterTitle">数据导出</div>
                <div class="matterStage">
                    <el-radio-group v-model="matterStage" @change="swtichMatterStageOption">
                        <el-radio :label="1">第一阶段</el-radio>
                        <el-radio :label="4">第四阶段</el-radio>
                        <el-radio :label="5">特别勤奋奖</el-radio>
                    </el-radio-group>
                </div>
                <div class="matterOperate">
                    <el-button plain @click="exportStageAwardUser(1)">导出选中内容</el-button>
                    <el-button @click="exportStageAwardUser(2)">全部导出</el-button>
                    <div class="matterSearch">
                        <!-- @keyup.enter.native="operateSearchRecord" -->
                        <el-input class="handle-input" v-model.trim="searchText" placeholder="用户昵称或者微信账号" suffix-icon="el-icon-search" @keyup.enter.native="searchAwardUser"></el-input>
                    </div>
                </div>

                <!-- @selection-change="handleSelectionChange" -->
                <el-table tooltip-effect="dark" style="width: 100%" :data="stageAwardUserList" ref="multipleTable" @selection-change="handleSelectionChange">
                    <el-table-column type="selection"  width="55"></el-table-column>
                    <el-table-column label="昵称" show-overflow-tooltip prop="userName"></el-table-column>
                    <!-- prop="address" -->
                    <el-table-column label="微信账号" show-overflow-tooltip prop="phone"></el-table-column>
                    <el-table-column label="获奖金额" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.randomBonus | formatAmount}}
                        </template>
                    </el-table-column>
                    <el-table-column label="提交时间" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.currentTime | formatTime}}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否已发布" v-if="matterStage === 5">
                        <template  slot-scope="scope">
                            <el-button :type="diligentIssue ? 'warning' : ''">{{diligentIssue ? '已发布':'未发布'}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next, jumper" :total="stageAwardUserTotal">
                    </el-pagination>
                </div>
            </div>
            <!-- 颁发奖项 -->
            <div v-show="matterType === '4'">
                <div style="margin-top: 20px">
                    <el-button @click="setAwardCountSort('1')"  :type="awardCountSort === '1' ? 'primary' : ''">邀请人数从高往低</el-button>
                    <el-button @click="setAwardCountSort('2')"  :type="awardCountSort === '2' ? 'primary' : ''">邀请人数从低往高</el-button>
                    <el-button @click="setAwardCountSort('3')"  :type="awardCountSort === '3' ? 'primary' : ''">金额从高往低</el-button>
                    <el-button @click="setAwardCountSort('4')"  :type="awardCountSort === '4' ? 'primary' : ''">金额从低往高</el-button>
                </div>
                <div style="margin-top: 20px">
                    <el-tag size="medium" type="info">获奖人数：{{awardCount.awardUserTotal || 0}}</el-tag>
                    <el-tag size="medium" type="info">邀请成功的人数：{{awardCount.inviteTotal || 0}}</el-tag>
                    <el-tag size="medium" type="info">总奖金：{{(awardCount.randomBonusTotal/ 100).toFixed(2)}}元</el-tag>
                </div>
                <div style="text-align: right">
                    <el-button :type="awardCount.issueTime ? 'info':'success'" :disabled="awardCount.issueTime" size="medium" @click="dialogReleaseVisible = true">{{awardCount.issueTime ? '已成功发布': '确认并发布'}}</el-button>
                </div>
                <div class="matterTitle">颁发奖项</div>
                
                <!-- @selection-change="handleSelectionChange" -->
                <el-table tooltip-effect="dark" style="width: 100%" :data="awardAssignMenuList" ref="multipleTable" >
                    <el-table-column width="55">
                        <template slot-scope="scope">
                            {{scope.row.index}}
                        </template>
                    </el-table-column>
                    <el-table-column label="昵称" show-overflow-tooltip prop="userName"></el-table-column>
                    <!-- prop="address" -->
                    <el-table-column label="微信账号" show-overflow-tooltip prop="phone"></el-table-column>
                    <el-table-column label="邀请人数" show-overflow-tooltip prop="inviteCount">
                         <template slot-scope="scope">
                            {{scope.row.inviteCount || 0}}
                        </template>
                    </el-table-column>
                    <el-table-column label="获奖金额" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.randomBonus | formatAmount}}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="提交时间" show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{scope.row.currentTime | formatTime}}
                        </template>
                    </el-table-column> -->
                    <el-table-column label="操作" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="success" @click="editUserAwardAssign(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination @current-change="handleAssignMenuCurrentChange" layout="prev, pager, next, jumper" :total="awardAssignMenuTotal">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 弹窗 (外层) -->
        <el-dialog :title="dialogOutsideTitle" :visible.sync="dialogOutsideVisible" width="60%" center>
            <div v-if="matterType === '2'">
                <el-form label-width="100px">
                    <el-form-item>
                        <div>发布时间</div>
                        <el-date-picker v-model="issueTime" type="datetime" placeholder="选择发布时间"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <div>选择乐曲</div>
                        <el-table :data="musicLevelList" style="width: 80%">
                            <el-table-column align="center" width="150" label=""></el-table-column>
                            <el-table-column label="">
                                <template slot-scope="scope">
                                    {{scope.row.title}}
                                </template>
                            </el-table-column>
                            
                            <el-table-column label="" align="center" width="300">
                                <template slot-scope="scope">
                                    <el-radio v-model="stripId" :label="scope.row.stripId" border>选择</el-radio>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogOutsideVisible = false">取 消</el-button>
                <el-button type="primary" @click.stop.prevent="operateConfirmResource()">确定选择</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改奖励金" width="60%" :visible.sync="awardAssignUpdateDialogVisible">
            <div>
                <el-input placeholder="格式：  8.88  或者 7" autocomplete="off" v-model.trim="awardAssignUpdateValue"></el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="awardAssignUpdateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmUpdateawardAssign()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogReleaseVisible"
            width="30%">
            <span>确认并发布后不可撤回，不可修改</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogReleaseVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmReleaseAward()">确定发布</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import { upLoadFileToOSS } from '@/config/utils'
  import { acquireActivityInformation, renewalActivityInformation, acquireParticipateDatum, acquireLevelResource, renewalLevelResource, acquireMusicLevel, setActivityStageTime, acquireActivityStageTime, renewalActivityTime, acquireStageAwardUser, acquireAwardAssignMenu, updateUserAward, auditJackpot, acquireDiligentAwardMenu } from '@/config/api'
  import { dateRegExp } from "@/config/filter";
import { timingSafeEqual } from 'crypto';
  export default {
    name: 'summerPractice',
    data () {
      return {
        // 内容类型  1 活动信息 2 乐曲资源
        matterType: '1',
        // 内容阶段 1阶段一 2阶段二 3阶段三 4阶段四
        matterStage: 1,
        // 外层 弹窗 · 显示
        dialogOutsideVisible: false,
        // 外层 弹窗 · 标题
        dialogOutsideTitle: '',

        // 上传多媒体类型 1活动封面  2活动介绍页  3活动规则页  4音符获取页
        multimediaStatus: '',

        matterCover: '',
        matterReferral: '',
        matterRule: '',
        matterGain: '',

        // 发布时间
        issueTime: '',
        // 选取关卡id
        stripId: null,
        levelBar: '',
        // 乐曲资源列表
        musicResourceList: [],
        // 乐曲资源条
        musicResourceBar: '',
        // 乐曲关卡列表
        musicLevelList: [],

        // 搜索文本
        searchText: '',
        // 第一阶段

        // 编辑颁奖时间 1 编辑 2 保存
        editAwardStatus: '1' ,
        // 第一阶段颁奖时间
        awardTimeOne: '',
        // 第二阶段颁奖时间
        awardTimeTwo: '',
        // 第三阶段颁奖时间
        awardTimeThree: '',
        // 第四阶段颁奖时间
        awardTimeFour: '',

        // 编辑活动时间 1 编辑 2 保存
        editMatterStatus: '1' ,
        // 活动开始时间
        matterStartTime: '',
        // 活动结束时间
        matterEndTime: '',

        // 活动参与数据
        participateDatumList: [],






        // // 搜索文本
        // searchText: '',
        // _searchText: '',
        // 搜索时间
        searchDate: '',
        _searchDate: '',

        
        // 反馈列表
        feedbackList: [{},{},{},{},{},{},{},{}],
        // 反馈总条数
        feedbackTotal: 0,
        // 反馈页码
        feedbackPage: 1,
        // 交流列表
        exchangeList: [],
        // 交流总条数
        exchangeTotal: 0,
        // 交流页码
        exchangePage: 1,



        // // 列表总页数
        // listTotal: 0,
        // 当前页面
        currentPage: 1,
        // 每页条数
        pageSize: 10,

        // 雄 
        // 第一阶段获奖用户名单
        stageAwardUserList: [],
        // 阶段获奖用户 页码
        stageAwardUserPage: 1,
        // 阶段获奖用户 总数
        stageAwardUserTotal: 0,
        //  阶段获奖用户 当前阶段
        currentStage: null,
        // 被选中的奖励用户
        awardUsermultipleSelection: [],
        // 奖励金分配名单 页码
        awardAssignMenuPage: 1,
        // 奖励金分配名单 列表
        awardAssignMenuList: [],
        // 奖励金分配名单 总数
        awardAssignMenuTotal: 0,
        //  修改奖励金分配 弹窗 显示
        awardAssignUpdateDialogVisible: false,
        // 修改金额
        awardAssignUpdateValue: '',
        // 临时存储用户奖励数据
        storageUserData: {},
        // 奖励池统计
        awardCount: {},
        // 是否确认发布万元大奖  弹窗显示
        dialogReleaseVisible: false,
        // 奖池计算通知排序
        awardCountSort: '3',
        // 勤奋奖是否已经发布
        diligentIssue: false 
      }
    },
    filters: {
        // 格式化金额
        formatAmount (amount) {
            return (amount / 100).toFixed(2)
        },
        // 格式化时间
        formatTime(time) {
            return dateRegExp(new Date(time).getTime(), "yyyy-MM-dd hh:mm:ss");
        },
    },
    mounted (){
      const self = this;
      // 初始化 暑期练琴界面
      self.initSummerPracticeInterface()
      // 获取阶段时间
      this.obtainActivityStageTime()
    },
    methods: {
        // 初始化 暑期练琴界面
        initSummerPracticeInterface() {
            const self = this;
            // 获取 活动的基本信息
            self.obtainBaseInformation()
        },
        // 获取 活动的基本信息
        async obtainBaseInformation() {
            const self = this;
            const matterType = '1'
            const baseInfo = await acquireActivityInformation(matterType)
            console.log(baseInfo, '获取 活动的基本信息')
            if (baseInfo.status === 200) {
                const { matterStart, matterEnd, matterCover, matterReferral, matterRule, matterGain } = baseInfo.data
                self.matterStartTime = new Date(matterStart) || ''
                self.matterEndTime = new Date(matterEnd) || ''
                self.matterCover = matterCover
                self.matterReferral = matterReferral
                self.matterRule = matterRule
                self.matterGain = matterGain
            }
        },
        // 更新 活动的基本信息
        async renovateBaseInformation() {
            const self = this;
            const matterType = '1'
            // 上传多媒体类型 1活动封面  2活动介绍页  3活动规则页  4音符获取页
            const matterCover = (self.multimediaStatus === '1')? self.matterCover: ''
            const matterReferral = (self.multimediaStatus === '2')? self.matterReferral: ''
            const matterRule = (self.multimediaStatus === '3')? self.matterRule: ''
            const matterGain = (self.multimediaStatus === '4')? self.matterGain: ''
            const baseInfo = await renewalActivityInformation(matterType, matterCover, matterReferral, matterRule, matterGain)
            console.log(baseInfo, '更新 活动的基本信息')
            if (baseInfo.status === 200) {}
        },
        // 获取 活动参与数据
        async obtainParticipateDatum() {
            const self = this;
            const matterType = '1'
            const datumInfo = await acquireParticipateDatum(matterType)
            if (datumInfo.status === 200) {
                // self.musicResourceList = levelInfo.data
                // 活动参与数据
                self.participateDatumList= datumInfo.data
            }
        },
        // 获取 乐曲的关卡资源
        async obtainLevelResource() {
            const self = this;
            const matterType = '1'
            const levelInfo = await acquireLevelResource(matterType)
            console.log(levelInfo, '获取 乐曲的关卡资源')
            if (levelInfo.status === 200) {
                self.musicResourceList = levelInfo.data
            }
        },
        // 更新 乐曲的关卡资源
        async renovateLevelResource() {
            const self = this;
            for (let i=0; i<self.musicLevelList.length; i++) {
                if (self.musicLevelList[i].stripId === self.stripId) {
                    self.levelBar = self.musicLevelList[i]
                    break
                }
            }
            console.log(self.levelBar, self.musicResourceBar, '.........self.levelBar..')
            const { id } = self.musicResourceBar
            const { title, noteId, stripId } = self.levelBar
            const levelInfo = await renewalLevelResource(id, title, noteId, stripId, self.issueTime)
            console.log(levelInfo, '更新 乐曲的关卡资源')
            if (levelInfo.status === 200) {
                // 操作 · 刷新资源
                self.operateRefreshResource()
            }
        },
        // 获取 乐曲的关卡列表
        async obtainMusicLevel() {
            const self = this;
            const chapterType = '5'
            const levelData = await acquireMusicLevel(chapterType)
            console.log(levelData, '获取 乐曲的关卡列表')
            if (levelData.status === 200) {
                // 乐曲关卡列表
                self.musicLevelList = levelData.data
            }
        },
        // 切换 暑期练琴选项
        swtichSummerPracticeOption() {
            const self = this;
            console.log(self.matterType)

            if (self.matterType === '2') {
                // 获取 乐曲的关卡资源
                self.obtainLevelResource()
                // 获取 活动参与数据
                self.obtainParticipateDatum()
            }
            if (self.matterType === '3') {
                console.log(self.matterStage, '..matterStage')
                // 切换 活动阶段
                self.swtichMatterStageOption();
            }
            if (self.matterType === '4') {
                this.awardAssignMenuPage = 1;
                this.obtainAwardAssignMenu();
            }
        },
        // 切换 活动阶段
        swtichMatterStageOption() {
            const self = this;
            console.log(self.matterStage, 'matterStage')
            this.stageAwardUserPage = 1;
            this.currentStage = self.matterStage;
            this.searchText = '';
            if ( this.currentStage === 5) {
                this.obtainDiligentAwardMenu();
            } else {
                this.obtainStageAcquireAwardUser()
            }
        },
        // 操作 · 编辑活动时间
        async optionEditorMatterTime(status) {
            const self = this;
            const matterType = '1'
            // 编辑活动时间 1 编辑 2 保存
            self.editMatterStatus = (status === '1')? '2' : '1'
            if (status === '2') {
                if (!self.matterStartTime || !self.matterEndTime) {
                    self.$notify.error({
                        title: '失败',
                        message: '活动时间不可为空'
                    });
                    self.matterStartTime = ''
                    self.matterEndTime = ''
                    return
                }
                // 更新活动时间
                const matterInfo = await renewalActivityTime(self.matterStartTime, self.matterEndTime, matterType)
            }
        },
        // 操作 · 编辑颁奖时间
        async optionEditorAwardTime(status) {
            const self = this;
            console.log('编辑颁奖时间', status)
            self.editAwardStatus = (status === '1')? '2' : '1'
            if (status === '2') {
                console.log('第一阶段颁奖时间', self.awardTimeOne)
                console.log('第二阶段颁奖时间', self.awardTimeTwo)
                console.log('第三阶段颁奖时间', self.awardTimeThree)
                console.log('第四阶段颁奖时间', self.awardTimeFour)
                let arrTime = [];
                arrTime.push({'stageTime':self.awardTimeOne})
                arrTime.push({'stageTime':self.awardTimeTwo})
                arrTime.push({'stageTime':self.awardTimeThree})
                arrTime.push({'stageTime':self.awardTimeFour})
                const res = await setActivityStageTime('1', arrTime) 
                if (res.status === 200) {
                    this.$notify({
                        title: '成功',
                        message: '设置成功',
                        type: 'success'
                    });
                } else {
                    self.$notify.error({
                        title: '失败',
                        message: res.msg
                    });
                }
            }
        },
        // 操作 · 选择资源
        operateSelectResource(item) {
            const self = this;
            // 外层 弹窗 · 显示
            self.dialogOutsideVisible = true
            // 外层 弹窗 · 标题
            self.dialogOutsideTitle = '选择资源'
            // 发布时间
            self.issueTime = new Date(item.issueTime) || ''
            // 选取关卡id
            self.stripId = item.stripId || null
            // 乐曲资源条
            self.musicResourceBar = item
            // 获取 乐曲的关卡列表
            self.obtainMusicLevel()
        },
        // 操作 · 确定资源
        operateConfirmResource() {
            const self = this;
            console.log(self.issueTime, self.levelBar, '确定资源')
            if (!self.issueTime || !self.stripId ) {
                self.$notify.error({
                    title: '错误',
                    message: '请选取发布时间 or 关卡资源'
                })
                return
            }
            // 更新 乐曲的关卡资源
            self.renovateLevelResource()
        },
        // 操作 · 刷新资源
        operateRefreshResource() {
            const self = this;
            // 外层 弹窗 · 显示
            self.dialogOutsideVisible = false
            if (self.matterType === '2') {
                // 获取 乐曲的关卡资源
                self.obtainLevelResource()
                // 获取 活动参与数据
                self.obtainParticipateDatum()
            }
        },
        // 选择欲上传的多媒体文件
        async optionUploadMultimediaFile(event, status) {
            const self = this;
            // 浏览器兼容 (FF不兼容event.srcElement)
            let evt = event.srcElement ? event.srcElement : event.target;
            // 获取要上传的文件
            let file = evt.files;
            // 上传多媒体类型 1活动封面  2活动介绍页  3活动规则页  4音符获取页
            self.multimediaStatus = status
            // 阿里oss上传路径
            let ossPath = ''
            if (self.multimediaStatus === '1' || self.multimediaStatus === '2' || self.multimediaStatus === '3' || self.multimediaStatus === '4') {
                ossPath = 'wx_mp/activity/image'
            }
            if (ossPath) {
                const loading = self.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                for (let i = 0; i < file.length; i++) {
                    // 上传多媒体
                    const mainBannerUrl = await upLoadFileToOSS(file[i], ossPath)
                    console.log(mainBannerUrl, '选择欲上传的多媒体文件')
                    if (self.multimediaStatus === '1') {
                        self.matterCover = mainBannerUrl
                    }
                    if (self.multimediaStatus === '2') {
                        self.matterReferral = mainBannerUrl
                    }
                    if (self.multimediaStatus === '3') {
                        self.matterRule = mainBannerUrl
                    }
                    if (self.multimediaStatus === '4') {
                        self.matterGain = mainBannerUrl
                    }
            
                    if (i === file.length - 1) {
                        // 更新 活动的基本信息
                        self.renovateBaseInformation()
                        // 上传多媒体类型 1活动封面  2活动介绍页
                        if (self.multimediaStatus === '1') {
                            self.$refs.matterCover.value = ''
                        }
                        if (self.multimediaStatus === '2') {
                            self.$refs.matterReferral.value = ''
                        }
                        if (self.multimediaStatus === '3') {
                            self.$refs.matterRule.value = ''
                        }
                        if (self.multimediaStatus === '4') {
                            self.$refs.matterGain.value = ''
                        }
                        loading.close()
                    }
                }
            }
        },
        // 雄 获取活动阶段时间
        async obtainActivityStageTime () {
            const self = this;
            const res = await acquireActivityStageTime('1')
            if (res.status === 200 && res.data && res.data.length === 4) {
                console.log(res.data, '....res.data')
                self.awardTimeOne   = new Date(res.data[0]['matterTime']) || ''
                self.awardTimeTwo   = new Date(res.data[1]['matterTime']) || ''
                self.awardTimeThree = new Date(res.data[2]['matterTime']) || ''
                self.awardTimeFour  = new Date(res.data[3]['matterTime']) || ''
            }
        },
        // 雄 获取阶段获奖名单
        async obtainStageAcquireAwardUser () {
            const stage = this.currentStage + '';
            const page = this.stageAwardUserPage;
            const searchText = this.searchText;
            const res = await acquireStageAwardUser(page, stage, searchText)
            if (res.status === 200) {
                this.stageAwardUserList = res.data;
                this.stageAwardUserTotal = res.total;
            }
        },
        // 搜索奖励用户
        async searchAwardUser () {
            const stage = this.currentStage + '';
            this.stageAwardUserPage = 1;
            const page = this.stageAwardUserPage;
            const searchText = this.searchText;
            if (stage === '5') {
                let res = await acquireDiligentAwardMenu(page, searchText)
                if (res.status === 200) {
                    for (let i = 0; i <  res.data.length; i++){
                        res.data[i]['currentTime'] =  res.data[i]['createTime'];
                        res.data[i]['randomBonus'] =  20000;
                    }   
                    this.stageAwardUserList = res.data;
                    this.stageAwardUserTotal = res.total;
                }
            } else {
                const res = await acquireStageAwardUser(page, stage, searchText)
                if (res.status === 200) {
                    this.stageAwardUserList = res.data;
                    this.stageAwardUserTotal = res.total;
                }
            }
            
        },
        // 雄 页码修改时
        handleCurrentChange (page) {
            this.stageAwardUserPage = page;
            this.obtainStageAcquireAwardUser();
        },
        // 阶段获取用户列表 select
        handleSelectionChange (val) {
            console.log(val,'   awardUsermultipleSelection')
            this.awardUsermultipleSelection = val;
        },
        //  获取奖励金分配名单
        async obtainAwardAssignMenu () {
            const page = this.awardAssignMenuPage;
            const sort = this.awardCountSort;
            const res = await acquireAwardAssignMenu(page, sort);
            if (res.status === 200) {
                this.awardAssignMenuList = res.data;
                this.awardAssignMenuTotal = res.total;
                for (let i = 0; i < this.awardAssignMenuList.length; i++) {
                    this.awardAssignMenuList[i]['index'] = ( (this.awardAssignMenuPage - 1 ) * 10) + (i + 1)
                }
                this.awardCount = res.awardCount;
            }
        },
        // 获取奖励金分配名单 改变时
        handleAssignMenuCurrentChange (val) {
            this.awardAssignMenuPage = val;
            this.obtainAwardAssignMenu();
        },
        // 编辑 修改奖励金
        editUserAwardAssign (row) {
            this.awardAssignUpdateDialogVisible = true;
            this.awardAssignUpdateValue = '';
            this.storageUserData = row;
        },
        // 确定修改奖励金
        async confirmUpdateawardAssign () {
            const randomBonus = (this.awardAssignUpdateValue - 0) * 100;
            console.log(randomBonus)
            const res = await updateUserAward(this.storageUserData.userId, randomBonus)
            if (res.status === 200) {
                this.obtainAwardAssignMenu();
                this.awardAssignUpdateDialogVisible = false;
                this.awardAssignUpdateValue = '';
                this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success'
                });
            } else {
                this.$notify.error({
                    title: '失败',
                    message: '修改失败'
                });
            }
        },
        // 确定发布奖励金
        async confirmReleaseAward () {
            console.log('发布奖励金')
            const res = await auditJackpot();
            if (res.status === 200) {
                this.obtainAwardAssignMenu();
                this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success'
                });
            } else {
                this.$notify.error({
                    title: '失败',
                    message: '修改失败'
                });
            }

            this.dialogReleaseVisible = false;
        },
        // 导出阶段用户数据  type 1部分导出 2全部导出
        async exportStageAwardUser (type) {
            if (type === 1) {
                const data = this.awardUsermultipleSelection;
                this.downExcel(data)
            } else if (type === 2) {
                const stage = this.currentStage + '';
                const page = this.stageAwardUserPage;
                const searchText = this.searchText;
                const downAll = '1'
                if (stage === '5') {
                    const res = await acquireDiligentAwardMenu(page, searchText, downAll)
                    if (res.status === 200) {
                        for (let i = 0; i <  res.data.length; i++){
                            res.data[i]['currentTime'] =  res.data[i]['createTime'];
                            res.data[i]['randomBonus'] =  20000;
                        }   
                        this.downExcel(res.data)
                    }
                } else {
                    const res = await acquireStageAwardUser(page, stage, searchText, downAll);
                    if (res.status === 200) {
                        this.downExcel(res.data)
                    }
                }
                
            }
        },
        // 下载表格
        async downExcel(data){
            if (data && data.length) {
                let jsonData = [];
                for (let i = 0; i < data.length; i++) {
                    jsonData.push({
                        userName: data[i]['userName'],
                        phone: data[i]['phone'],
                        randomBonus: (data[i]['randomBonus'] / 100).toFixed(2),
                        currentTime: dateRegExp(new Date(data[i]['currentTime']).getTime(), "yyyy-MM-dd hh:mm:ss"),
                    })
                };

                 //列标题，逗号隔开，每一个逗号就是隔开一个单元格
                let str = `昵称,微信账号,获奖金额,提交时间\n`;
                //增加\t为了不让表格显示科学计数法或者其他格式
                for(let i = 0 ; i < jsonData.length ; i++ ){
                    for(let item in jsonData[i]){
                        str+=`${jsonData[i][item] + '\t'},`;     
                    }
                    str+='\n';
                }
                //encodeURIComponent解决中文乱码
                let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
                //通过创建a标签实现
                let link = document.createElement("a");
                link.href = uri;
                //对下载的文件命名
                link.download =  "订单.csv";
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                this.$refs.multipleTable.clearSelection();
            };
        },
        // 设置奖池排序
        setAwardCountSort (sort) {
            this.awardCountSort = sort;
            this.awardAssignMenuPage = 1;
            this.obtainAwardAssignMenu();
        },
        // 获取勤奋奖用户
        async obtainDiligentAwardMenu () {
            const stage = this.currentStage + '';
            const page = this.stageAwardUserPage;
            const searchText = this.searchText;
            let res = await acquireDiligentAwardMenu(page, searchText)
            if (res.status === 200) {
                for (let i = 0; i <  res.data.length; i++){
                    res.data[i]['currentTime'] =  res.data[i]['createTime'];
                    res.data[i]['randomBonus'] =  20000;
                }   
                this.stageAwardUserList = res.data;
                this.stageAwardUserTotal = res.total;
                this.diligentIssue = res.issueTime
            }
        },






      // 初始化 采纳管理界面
      initAdoptManageInterface() {
        const self = this;
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 获取 集合中的采纳记录
      async obtainAdoptFromGather() {
        const self = this;
        // 内容类型  1投票 2推荐(不用) 3反馈 4交流
        if (self.matterType === '3') {
          // 当前页面
          self.currentPage = self.feedbackPage
        }
        if (self.matterType === '4') {
          // 当前页面
          self.currentPage = self.exchangePage
        }
        self._searchText = self._searchText || ''
        self._searchDate = self._searchDate || ''
        const adoptInfo = await acquireAdoptFromGather(self.matterType, self.currentPage, self.pageSize, self._searchText, self._searchDate)
        console.log(adoptInfo, '获取 集合中的采纳记录')
        if (adoptInfo.status === 200) {
          // 反馈列表
          self.feedbackList = adoptInfo.data.feedbackList
          // 反馈总条数
          self.feedbackTotal = adoptInfo.data.feedbackTotal
          // 交流列表
          self.exchangeList = adoptInfo.data.exchangeList
          // 交流总条数
          self.exchangeTotal = adoptInfo.data.exchangeTotal
        }
      },
      // // 操作·筛选记录
      // async operateScreenRecord() {
      //   const self = this;
      //   console.log(self.matterType, self.searchText, self.searchDate, '....')
      //   // 内容类型  1投票 2推荐(不用) 3反馈 4交流
      //   if (self.matterType === '3') {
      //     // 反馈页码
      //     self.feedbackPage = 1
      //   }
      //   if (self.matterType === '4') {
      //     // 反馈页码
      //     self.exchangePage = 1
      //   }
      //   self._searchText = self.searchText
      //   // 获取 集合中的采纳记录
      //   self.obtainAdoptFromGather()
      // },
      // 操作·搜索记录
      async operateSearchRecord() {
        const self = this;
        console.log(self.matterType, self.searchText, self.searchDate, '....')
        // 内容类型  1投票 2推荐(不用) 3反馈 4交流
        if (self.matterType === '3') {
          // 反馈页码
          self.feedbackPage = 1
        }
        if (self.matterType === '4') {
          // 反馈页码
          self.exchangePage = 1
        }
        self._searchText = self.searchText
        self._searchDate = self.searchDate
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 切换 采纳记录选项
      swtichAdoptRecordOption() {
        const self = this;
        // 搜索时间
        self.searchDate = ''
        // 搜索文本
        self.searchText = ''
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 分页 页条数的变化
      pagingSizeChange(val) {
        const self = this;
        // 每页条数
        self.pageSize = val
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 分页 页码的变化
      pagingCurrentChange(val) {
        const self = this;
        // 内容类型  1投票 2推荐(不用) 3反馈 4交流
        if (self.matterType === '3') {
          // 反馈页码
          self.feedbackPage = val
        }
        if (self.matterType === '4') {
          // 反馈页码
          self.exchangePage = val
        }
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      }
    },
  }
</script>
<style lang="less">
  .summerPractice {
    .el-select {
      .el-input {
        width: 100px;
      }
    } 
  }
</style>
<style lang="less" scoped>
  @import 'summerPractice.less';
</style>
